import { Menu } from "@headlessui/react";
import cx from "classnames";
import { FiChevronDown } from "react-icons/fi";
import "./Airdrop.scss";

function AssetDropdown({ position = "left", onChange, pageSize }) {
  return (
    <div className="AssetDropdown-wrapper cursor-pointer">
      <Menu>
        <Menu.Button as="div" className="">
          <FiChevronDown color="#838383" size={20} />
        </Menu.Button>
        <Menu.Items as="div" className={`${cx("asset-menu-items-airdrop", { left: position === "left" })} `}>
          <Menu.Item
            onClick={() => {
              onChange(10);
            }}
            className={`${pageSize === 10 && "airdrop-active"} airdrop-item`}
            as="div"
          >
            10
          </Menu.Item>
          <Menu.Item
            onClick={() => {
              onChange(20);
            }}
            className={`${pageSize === 20 && "airdrop-active"} airdrop-item`}
            as="div"
          >
            20
          </Menu.Item>
          <Menu.Item
            onClick={() => {
              onChange(30);
            }}
            className={`${pageSize === 30 && "airdrop-active"} airdrop-item`}
            as="div"
          >
            30
          </Menu.Item>
        </Menu.Items>
      </Menu>
    </div>
  );
}

export default AssetDropdown;
